import React from 'react'
import { Descriptions, Tag } from 'antd'
import CardTitle from './CardTitle'
import { color, ba } from '../../utils/json'
import none from './img/none.png'
import { SERVER } from 'configs/service'
import { session } from 'utils'
import { Image } from '@zzwing/react-image'

export default function EngineRecord(props) {
  const { data } = props
  const record = data.engineDetailVo ? data.engineDetailVo : {}

  return (
    <div>
      <CardTitle title="基础信息"></CardTitle>
      <Descriptions>
        <Descriptions.Item label="发动机型号">
          {record.engineModel}
        </Descriptions.Item>
        <Descriptions.Item label="备案状态">
          {record.filingStatus || record.filingStatus === 0 ? (
            <Tag color={color[record.filingStatus]}>
              {ba[record.filingStatus]}
            </Tag>
          ) : (
            '--'
          )}
        </Descriptions.Item>
        <Descriptions.Item label="供应商名称">
          {record.supplier}
        </Descriptions.Item>
        <Descriptions.Item label="发动机额定功率(kw)">
          {record.engineRatedPower}
        </Descriptions.Item>
        <Descriptions.Item label="发动机排量(L)">
          {record.engineSweptVolume}
        </Descriptions.Item>
        <Descriptions.Item label="气缸排列型式">
          {record.engineCylinderArrangement}
        </Descriptions.Item>
        <Descriptions.Item label="排气后处理系统形式">
          {record.pcdExhaustType}
        </Descriptions.Item>
        <Descriptions.Item label="最大功率/转速(kw/r/min)">
          {record.engineMaxpowerSpeed}
        </Descriptions.Item>
        <Descriptions.Item label="最大扭矩/转速(nm/r/min)">
          {record.engineMaxtorqueSpeed}
        </Descriptions.Item>
        <Descriptions.Item label="参考扭矩">
          {record.engineTorque}
        </Descriptions.Item>
        <Descriptions.Item label="etc循环功">
          {record.etcCycleWork}
        </Descriptions.Item>
        <Descriptions.Item label="wthc循环功">
          {record.wthcCycleWork}
        </Descriptions.Item>
        <Descriptions.Item label="软件标定识别(CALID)">
          {record.calid}
        </Descriptions.Item>
        <Descriptions.Item label="标定验证码(CVN)">
          {record.cvn}
        </Descriptions.Item>
      </Descriptions>
      <CardTitle title="相关附件"></CardTitle>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-around',
          marginBottom: 24,
        }}
      >
        <Imgbox
          title="obd照片"
          isImg
          src={
            record.obdInterfacePhotoFileId
              ? `${SERVER}/uploadFile/base64Read?id=${record.obdInterfacePhotoFileId}&Authorization=${session.Authorization}`
              : null
          }
        ></Imgbox>
      </div>
      <CardTitle title="备案记录"></CardTitle>
    </div>
  )
}

function Imgbox(props) {
  const { src, title, isImg } = props

  return (
    <div style={{ width: 140, height: 180 }}>
      {isImg ? (
        <Image
          src={src ? src : none}
          style={{ width: 140, height: 145, backgroundSize: '100%' }}
        />
      ) : (
        <a href={src}>点击下载</a>
      )}
      <div style={{ textAlign: 'center', lineHeight: '40px' }}>{title}</div>
    </div>
  )
}
